<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户端 - 报价详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            max-width: 414px;
            margin: 0 auto;
            background: #f5f5f5;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm px-4 py-3 flex items-center">
        <i class="fas fa-arrow-left text-gray-600 text-xl mr-4"></i>
        <div class="text-lg font-semibold text-gray-800">报价详情</div>
    </nav>

    <div class="pb-32">
        <!-- 报价基本信息 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">报价单号</span>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-800 font-medium">QT20240116001</span>
                    <i class="fas fa-copy text-[#6366f1]"></i>
                </div>
            </div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">关联需求：</span>
                <span class="text-sm text-[#6366f1]">系统功能优化需求</span>
            </div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">报价时间</span>
                <span class="text-sm text-gray-800">2024-01-16 16:00</span>
            </div>
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-600">有效期至</span>
                <span class="text-sm text-[#6366f1] font-medium">2024-02-16 16:00</span>
            </div>
            <div class="mt-3 text-right">
                <span class="bg-[#eef2ff] text-[#6366f1] text-xs px-2 py-1 rounded">待确认</span>
            </div>
        </div>

        <!-- 报价金额 -->
        <!-- <div class="bg-[#6366f1] rounded-lg mx-4 mt-4 p-8 text-center text-white shadow-sm">
            <div class="text-sm mb-2 opacity-90">报价总额</div>
            <div class="text-5xl font-bold">¥15,000</div>
        </div> -->

        <!-- 报价明细 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-5">报价明细</h2>
            <ul class="divide-y divide-gray-100">
                <li class="py-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex items-center mb-2 sm:mb-0">
                        <span class="inline-block bg-[#eef2ff] text-[#6366f1] rounded-full px-3 py-1 text-xs font-medium mr-3">1</span>
                        <span class="text-gray-900 text-base font-medium">系统性能优化服务</span>
                    </div>
                    <div class="grid grid-cols-3 gap-x-5 text-sm text-gray-600 text-right min-w-[210px]">
                        <span>数量 <span class="text-gray-800 font-semibold">1</span></span>
                        <span>单价 <span class="text-gray-800 font-semibold">¥8,000</span></span>
                        <span class="text-[#6366f1] font-bold">小计 ¥8,000</span>
                    </div>
                </li>
                <li class="py-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex items-center mb-2 sm:mb-0">
                        <span class="inline-block bg-[#eef2ff] text-[#6366f1] rounded-full px-3 py-1 text-xs font-medium mr-3">2</span>
                        <span class="text-gray-900 text-base font-medium">数据库优化设计</span>
                    </div>
                    <div class="grid grid-cols-3 gap-x-5 text-sm text-gray-600 text-right min-w-[210px]">
                        <span>数量 <span class="text-gray-800 font-semibold">1</span></span>
                        <span>单价 <span class="text-gray-800 font-semibold">¥5,000</span></span>
                        <span class="text-[#6366f1] font-bold">小计 ¥5,000</span>
                    </div>
                </li>
                <li class="py-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex items-center mb-2 sm:mb-0">
                        <span class="inline-block bg-[#eef2ff] text-[#6366f1] rounded-full px-3 py-1 text-xs font-medium mr-3">3</span>
                        <span class="text-gray-900 text-base font-medium">前端交互体验优化</span>
                    </div>
                    <div class="grid grid-cols-3 gap-x-5 text-sm text-gray-600 text-right min-w-[210px]">
                        <span>数量 <span class="text-gray-800 font-semibold">1</span></span>
                        <span>单价 <span class="text-gray-800 font-semibold">¥2,000</span></span>
                        <span class="text-[#6366f1] font-bold">小计 ¥2,000</span>
                    </div>
                </li>
            </ul>
            <div class="flex justify-between items-center pt-5 border-t border-gray-100 mt-5">
                <span class="text-base text-gray-500 font-medium">合计</span>
                <span class="text-2xl font-bold text-[#6366f1]">¥15,000</span>
            </div>
        </div>

        <!-- 备注说明 -->
        <div class="bg-white rounded-lg mx-4 mt-4 p-4 shadow-sm">
            <h2 class="text-lg font-bold text-gray-800 mb-3">备注说明</h2>
            <p class="text-sm text-gray-600 leading-relaxed">
                报价包含开发、测试、部署等全部费用。预计完成时间为2周。如有疑问，请及时联系。
            </p>
        </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4" style="max-width: 414px; margin: 0 auto;">
        <div class="grid grid-cols-2 gap-3">
            <button 
                class="bg-gray-100 text-gray-700 py-3 rounded-lg font-medium" 
                onclick="showRejectConfirmModal()"
            >拒绝报价</button>

            <!-- 二次确认弹窗 -->
            <div id="rejectConfirmModal" class="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.3)]" style="display: none;">
                <div class="bg-white rounded-xl shadow-xl w-80 max-w-[90vw] p-6 text-center">
                    <div class="text-lg font-semibold text-gray-800 mb-3">确认拒绝报价？</div>
                    <div class="text-sm text-gray-600 mb-5">拒绝后本次报价将失效，确定继续？</div>
                    <div class="flex space-x-3">
                        <button 
                            class="flex-1 bg-gray-100 py-2 rounded-lg font-medium text-gray-700"
                            onclick="closeRejectConfirmModal()"
                        >取消</button>
                        <button 
                            class="flex-1 bg-[#6366f1] py-2 rounded-lg font-medium text-white"
                            onclick="handleRejectConfirmed()"
                        >确认拒绝</button>
                    </div>
                </div>
            </div>
            <script>
                function showRejectConfirmModal() {
                    document.getElementById('rejectConfirmModal').style.display = 'flex';
                }
                function closeRejectConfirmModal() {
                    document.getElementById('rejectConfirmModal').style.display = 'none';
                }
                function handleRejectConfirmed() {
                    // 这里处理拒绝事件（可增加ajax或跳转等逻辑）
                    closeRejectConfirmModal();
                    alert('您已拒绝该报价。');
                }
            </script>
            <button class="bg-[#6366f1] text-white py-3 rounded-lg font-medium">确认报价</button>
        </div>
    </div>
</body>
</html>
